<script setup lang="ts">
  // import RightRoot from '@/components/RightSplit/RightRoot.vue';
  import { ref, computed } from 'vue';
  import { ElInput, ElMenu, ElSubMenu, ElMenuItem } from 'element-plus';

  interface MenuItem {
    index: string;
    icon?: URL | string;
    title: string;
    children?: MenuItem[];
  }

  const menuItems = ref<MenuItem[]>([
    {
      index: '1-1',
      icon: 'el-icon-document',
      title: '基础几何体',
      children: [
        {
          index: '1-1-1',
          icon: new URL('/@/assets/DigitalAssets/cube.png', import.meta.url).href,
          title: '立方体',
        },
        { index: '1-1-2', icon: new URL('/@/assets/DigitalAssets/ball.png', import.meta.url).href, title: '球体' },
        { index: '1-1-3', icon: new URL('/@/assets/DigitalAssets/pipe.png', import.meta.url).href, title: '管道' },
      ],
    },
    { index: '1-3', icon: 'el-icon-setting', title: '地铁站' },
    { index: '1-4', icon: 'el-icon-setting', title: '城市' },
    { index: '1-5', icon: 'el-icon-setting', title: '工厂' },
    { index: '1-6', icon: 'el-icon-setting', title: '智慧仓储' },
    { index: '1-7', icon: 'el-icon-setting', title: '智慧机房' },
    { index: '1-8', icon: 'el-icon-setting', title: '智慧楼宇' },
    { index: '1-9', icon: 'el-icon-setting', title: '智慧高炉' },
    { index: '1-10', icon: 'el-icon-setting', title: '暖通' },
    { index: '1-11', icon: 'el-icon-setting', title: '石油化工厂' },
    { index: '1-12', icon: 'el-icon-setting', title: '风电能源' },
  ]);

  const searchQuery = ref<string>('');

  const filteredMenuItems = computed(() => {
    if (!searchQuery.value) return menuItems.value;

    return menuItems.value.filter((item) => {
      const hasMatchingChild = item.children?.some((child) =>
        child.title.toLowerCase().includes(searchQuery.value.toLowerCase()),
      );
      return item.title.toLowerCase().includes(searchQuery.value.toLowerCase()) || hasMatchingChild;
    });
  });
</script>

<template>
  <div class="model-view">
    <!-- 左侧导航栏容器 -->
    <div class="menu-container">
      <!-- 搜索框 -->
      <el-input v-model="searchQuery" placeholder="搜索..." class="search-box" />

      <!-- 导航栏 -->
      <el-menu
        background-color="#303648"
        text-color="#fff"
        active-text-color="#ffd04b"
        class="side-bar"
      >
        <el-sub-menu v-for="item in filteredMenuItems" :key="item.index" :index="item.index">
          <template #title>
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item v-for="child in item.children" :key="child.index" :index="child.index">
            <img v-if="child.icon" :src="child.icon" alt="" style="width: 30px; height: 30px" />{{
              child.title
            }}
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>

    <!-- 中间内容区域 -->
    <div class="main-content">
      <!-- 中间内容区域的内容 -->
      <img
        src="../../assets/DigitalAssets/unity.png"
        style="height: 95vh; position: absolute; width: 66vw"
      />
    </div>
    <!--    右侧内容区域-->
    <div>
      <!--      <RightRoot height="100vh" />-->
    </div>
  </div>
</template>

<style scoped>
  :deep(.el-input__wrapper) {
    background-color: gray !important;
    box-shadow: none;
  }

  .model-view {
    height: 100%;
    display: flex;
    align-items: flex-start;
  }

  .menu-container {
    height: 100%;
    width: 200px; /* 确保宽度与 .side-bar 一致 */
    display: flex;
    flex-direction: column;
  }

  .search-box {
    margin-bottom: 0; /* 调整搜索框与菜单之间的间距 */
    padding: 5px; /* 添加内边距 */
    border: none; /* 去掉边框 */
    background-color: #303648; /* 设置背景颜色为灰色 */
    color: #fff; /* 设置文字颜色为白色 */
  }

  /* 新增样式以去除中间的白色空隙并设置淡灰色背景 */
  .search-box .el-input__inner {
    background-color: #474e5b; /* 淡灰色背景 */
    border: none;
    height: 32px; /* 调整高度以匹配默认样式 */
  }

  .side-bar {
    flex-grow: 1; /* 让 el-menu 占据剩余空间 */
    width: 100%;
    margin-right: 20px;
  }

  .main-content {
    flex-grow: 1;
    padding: 0;
  }
</style>
